<script lang="ts" setup name="B9Watch1">
import { ref, watch } from "vue";

const sum = ref(0);

const incrSum = () => {
  sum.value += 1;
};

// 监听
const stopWatch = watch(sum, (newVal, oldVal) => {
  console.log(`sum 的值发生变化：${oldVal} ==> ${newVal}`);

  if (newVal >= 10) {
    stopWatch();
  }
});
</script>
<template>
  <h1 class="text-xl border-l-8 pl-3">情况一：监视ref定义的基本类型数据</h1>
  <div class="my-3">当前求和：{{ sum }}</div>
  <button @click="incrSum" class="border p-1 shadow">sum+1</button>
</template>
